{% extends "items/base_items.html" %}

{% load dash_filters %}

{% block mystylesheet %}
    <link rel="stylesheet" href="/mymedia/css/style-icon-images.css" type="text/css" />
{% endblock mystylesheet%}

{% block menuOptionsSelected %}
    <ul class="menu-options">
        <li class="menu-item"><a href="/dash/dashboard/">Dashboard</a></li>
        <li class="menu-item"><a href="/dash/logbook/">Logbook</a></li>
        <li class="menu-item"><a href="/dash/topicos/">Topicos</a></li>
    </ul>
{% endblock menuOptionsSelected %}

{% block item %}
    <div class="item-messages">
        {% for message in messages %}
            <p class="message">{{ message }}</p>
        {% endfor %}
    </div>
    <div class="item-content">
        <div class="item-header">
            <div class="item-topico item-topico-{{ item.topico|unicode|split:" "|first|lower }}" title="{{ item.topico|unicode|split:" "|first }}"></div>
            <div class="item-nombre">{{ item }}</div>
            <div class="item-score">
                <img src="/mymedia/images/dashboard-content-item-header-score.png" class="item-score-image" alt="Score">
                {{ item.persona_set.count }}
            </div>
            <div class="clear"></div>
        </div>
        <div class="item-body">
            <div class="item-image-big">
                {% if item.mis_imagenes.count %}
                    <img src="{{ item.first_image_big }}" alt="Score">
                {% else %}
                    <img src="/mymedia/images/298.png" alt="Score">
                {% endif %}
            </div>
            <div class="item-descripcion-big">{{ item.descripcion }}</div>
            <div class="item-image-all">
                <ul class="image-list">
                    {% for itemimage in item.mis_imagenes.all %}
                        <li class="image-little"><img src="{{ itemimage.imagen.url_50x50 }}" alt="Score"></li>
<!--
                    <li class="image-little"><img src="/mymedia/images/206.png" alt="Score"></li>
                    <li class="image-little"><img src="/mymedia/images/207.png" alt="Score"></li>
-->
                    {% endfor %}
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="item-footer">
            <div class="item-details">
                <div class="stadistic-fan sidebar-stadistic-item">
                    <div class="stadistic-num">{{ item.persona_set.count }}</div>
                    <div class="stadistic-nom">Fan{% if user.persona.items.count > 1 %}s{% endif %}</div>
                </div>
                <div class="stadistic-fan sidebar-stadistic-item">
                    <div class="stadistic-num">{{ item.recomendacion_set.count }}</div>
                    <div class="stadistic-nom">Recomendaciones</div>
                </div>
            </div>
            <div class="item-buttons">
                {% if not is_fan %}
                    <a href="/items/fan/{{ item.id }}" ><img src="/mymedia/images/item-button-fan.png" alt="Fan" /></a>
                {% endif %}
                <a href="/items/recomendation/{{ item.id }}" ><img src="/mymedia/images/item-button-recomendar.png" alt="Recomendar" /></a>
                <a href="#" ><img src="/mymedia/images/item-button-denunciar.png" alt="Denunciar" /></a>
                {% if is_fan %}
                    <a href="/items/unfan/{{ item.id }}" ><img src="/mymedia/images/item-buttom-unFan.png" alt="Unfan" /></a>
                {% endif %}
            </div>
            <div class="clear"></div>
        </div>
    </div>
{% endblock item %}

{% block extra %}
    <div class="extra-tags">
        <h3>Etiquetas</h3>
        <div>Tag1 Tag2 Tag3 Tag4 Tag5 Tag5 Tag6</div>
    </div>
    <div class="extra-links">
        <p>Lo podés conseguir en:</p>
        <div class="item-image-all">
            <ul class="image-list">
                <li class="image-little-ref"><img src="/mymedia/images/197.png" alt="Score"></li>
                <li class="image-little-ref"><img src="/mymedia/images/466.png" alt="Score"></li>
                <li class="image-little-ref"><img src="/mymedia/images/563.png" alt="Score"></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
{% endblock extra %}

{% block comments %}
    <div class="list-comment">
        {% for comment in comments %}
            <div class="comment">
                <div class="comment-user-image">
                    {% if comment.user.persona.avatar %}
                        <img src="{{ comment.user.persona.avatar.url_50x50 }}" alt="Logo" />
                    {% else %}
                        {% if comment.user.persona %}
                            {% if comment.user.persona.sexo == "M" %}
                                <img src="/mymedia/images/avatar-male.png" alt="Logo" />
                            {% else %}
                                <img src="/mymedia/images/avatar-famale.png" alt="Logo" />
                            {% endif%}
                        {% else %}
                                <img src="/mymedia/images/020.png" alt="Logo" />
                        {% endif%}
                    {% endif%}
                </div>
                <div class="comment-user">
                    <p class="comment-username">
                        {{ comment.user.first_name }} {{ comment.user.last_name }} - <span class="coment-date">{{ comment.fecha }}</span>
                    </p>
                    <p class="comment-text">{{ comment.comentario }}</p>
                </div>
                <div class="comment-options">
                    <div class="me-gusta-comentario">
                        <div class="num">{{ comment.me_gusta }}</div>
                        <div class="link"><a href="/items/comment/megusta/{{ comment.id }}" title="Me gusta"><div class="me-gusta-img"></div></a></div>
                        <div class="clear"></div>
                    </div>
                    <div class="denunciar-comentario">
                        <div class="num">{{ comment.denuncias }}</div>
                        <div class="link"><a href="/items/comment/denunciar/{{ comment.id }}" title="Denunciar"><div class="denuncia-comentario-img"></div></a></div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        {% endfor %}
        <div class="comment-add">
                <div class="comment-user-image-add">
                    {% if user.persona.avatar %}
                        <img src="{{ user.persona.avatar.url_50x50 }}" alt="Logo" />
                    {% else %}
                        {% if user.persona %}
                            {% if user.persona.sexo == "M" %}
                                <img src="/mymedia/images/avatar-male.png" alt="Logo" />
                            {% else %}
                                <img src="/mymedia/images/avatar-famale.png" alt="Logo" />
                            {% endif%}
                        {% else %}
                                <img src="/mymedia/images/020.png" alt="Logo" />
                        {% endif%}
                    {% endif%}
                </div>
                <div class="comment-user-add">
                    <p class="comment-username-add">{{ user.first_name }} {{ user.last_name }}</p>
                        <form action="/items/comment/{{ item.id }}" method="post">{% csrf_token %}
                            {{ comment_form.as_p }}
                            <input type="submit" value="Comentar" class="submit"/>
                        </form>
                </div>
                <div class="comment-options-add"></div>
            </div>
    </div>
{% endblock comments %}
